// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as *;
@use 'vars/lib' as *;

@supports (clip-path: polygon(50% 0%, 0% 100%, 100% 100%)) {
    .m24-c-transition {
        height: 40px;
        position: relative;

        &::before {
            bottom: 0;
            clip-path: polygon(0% 60%, 25% 60%, 25% 100%, 60% 100%, 60% 50%, 80% 50%, 80% 0%, 0% 0%);
            content: '';
            display: block;
            height: 41px;
            left: 0;
            position: absolute;
            right: 0;
            top: -1px; // slight overlap to compensate for antialiasing
        }

        hr {
            @include visually-hidden;
        }

        @media #{$mq-md} {
            height: 90px;

            &::before {
                height: 91px;
            }
        }

        &.m24-t-top-light::before,
        &.m24-t-bottom-light {
            background-color: $m24-color-white;
        }

        &.m24-t-top-light-alt::before,
        &.m24-t-bottom-light-alt {
            background-color: $m24-color-alt-white;
        }

        &.m24-t-top-dark::before,
        &.m24-t-bottom-dark {
            background-color: $m24-color-black;
        }

        &.m24-t-top-dark-alt::before,
        &.m24-t-bottom-dark-alt {
            background-color: $m24-color-alt-black;
        }

        &.m24-t-top-green::before,
        &.m24-t-bottom-green {
            background-color: $m24-color-light-green;
        }

        &.m24-t-top-orange::before,
        &.m24-t-bottom-orange {
            background-color: $m24-color-light-orange;
        }

        &.m24-t-top-pink::before,
        &.m24-t-bottom-pink {
            background-color: $m24-color-light-pink;
        }

        &.m24-t-top-gray::before,
        &.m24-t-bottom-gray {
            background-color: $color-moz-white;
        }

    }
}
